<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-gutter-column-xl">
  <div class="aui-gutter-column-sm aui-h3" *ngIf="!filesetTemplate">
    <ng-container *ngIf="isCyberEngine; else elseTitelTemplate">
      {{(isRealDetection ? 'explore_real_detection_policy_label' : 'explore_intelligent_detection_policy_label') |
      i18n}}
    </ng-container>
    <ng-template #elseTitelTemplate>
      {{'protection_select_sla_label' | i18n}}
    </ng-template>
  </div>
  <ng-container *ngIf="!isCyber">
    <lv-alert lvType="error" *ngIf="isWormData && isWormSLA">
      <p class="lv-alert-title">{{'common_worm_protection_alarm_label'|i18n}}</p>
    </lv-alert>
    <lv-alert lvType="info" *ngIf="hasRansomware && hasAggregationApp">
      {{(isBatchProtect ?
      'protection_sla_ransomware_increment_batch_tip_label':'protection_sla_ransomware_increment_tip_label') | i18n}}
    </lv-alert>
  </ng-container>
  <div class="aui-operation">
    <lv-group>
      <button lv-button (click)="createSla()" [disabled]="disableSLA">
        {{ 'common_create_label' | i18n }}
      </button>
    </lv-group>
    <lv-radio-group [ngModel]="selectedSlaView" class="radio-position" [lvGroupName]="'slaViewGroup'"
      (ngModelChange)="viewChange($event)">
      <lv-group>
        <lv-radio [lvViewType]="'button'" [lvValue]="0" class="sla-view">
          <i lv-icon="aui-icon-sla-card-view" [lvColorState]='true'></i>
        </lv-radio>
        <lv-radio [lvViewType]="'button'" [lvValue]="1" class="sla-view">
          <i lv-icon="aui-icon-sla-list-view" [lvColorState]='true' class="list-view-mgt"></i>
        </lv-radio>
      </lv-group>
    </lv-radio-group>
  </div>

  <ng-container *ngIf="!selectedSlaView">
    <div *ngIf="slaList.length > 0" class="aui-paginator-container">
      <lv-radio-group #group [(ngModel)]="resourceData.sla_id" [lvGroupName]="'slaGroup'" class="radio-group-width"
        (ngModelChange)="slaChange(resourceData.sla_id)">
        <lv-group class="radio-group-width" [lvColumns]='["auto", "auto"]' lvRowGutter="16px" lvColumnGutter="16px">
          <ng-container *ngFor="let item of slaList;let odd=odd">
            <lv-radio [lvViewType]="'custom'" [lvValue]="item.uuid" [lvDisabled]="disableSLA || item.disabled">
              <div lvTooltipClassName="card-tip" lvTooltipPosition="bottom" (mouseenter)="cardEnter(item)"
                [lv-tooltip]="cardTipTemplate" class="card" [ngClass]="{'select': group.isChecked(item.uuid)}">
                <ng-container [ngSwitch]="item.name">
                  <div class="sla-status-container">
                    <ng-container *ngIf="!['Gold','Silver','Bronze'].includes(item.name); else elseTemplate">
                      <i class="sla-icon user-define"
                        [ngClass]="{'user-define-disabled':disableSLA || item.disabled}"></i>
                      <span class="sla-name" [ngClass]="{'sla-disabled':disableSLA || item.disabled}"
                        (click)="getDetail($event, item)" lv-overflow lvTooltipTheme="light"
                        lvTooltipPosition="topLeft">{{item.name}}</span>
                      <span class="guide-recommend-label mgt-8" *ngIf="showGuideNew(item)">
                        {{'protection_guide_new_resource_label' | i18n}}
                      </span>
                    </ng-container>
                    <ng-template #elseTemplate>
                      <i class="sla-icon"
                        [ngClass]="{'gold': item.name === 'Gold', 'silver': item.name === 'Silver', 'bronze': item.name === 'Bronze'}"></i>
                      <span class="sla-name" (click)="getDetail($event, item)" lv-overflow>{{item.name}}</span>
                    </ng-template>
                  </div>
                  <div class="sla-icon-container">
                    <ng-container *ngSwitchCase="'Gold'">
                      <img src="assets/img/sla-gold.png">
                    </ng-container>
                    <ng-container *ngSwitchCase="'Silver'">
                      <img src="assets/img/sla-silver.png">
                    </ng-container>
                    <ng-container *ngSwitchCase="'Bronze'">
                      <img src="assets/img/sla-bronze.png">
                    </ng-container>
                    <ng-container *ngSwitchDefault>
                      <ng-container *ngIf="isCyberEngine; else elseImgTemplate">
                        <img src="assets/img/detection_policy.svg">
                      </ng-container>
                      <ng-template #elseImgTemplate>
                        <ng-container *ngIf="(!disableSLA && !item.disabled) else disableSlaTpl">
                          <img src="assets/img/sla-user_defined.png">
                        </ng-container>
                        <ng-template #disableSlaTpl>
                          <img src="assets/img/replication-sla-disabled.svg">
                        </ng-template>
                      </ng-template>
                    </ng-container>
                  </div>
                </ng-container>
              </div>
            </lv-radio>
          </ng-container>
        </lv-group>
      </lv-radio-group>
      <div class="aui-paginator-wrap">
        <lv-paginator lvMode="simple" [lvPageSize]="pageSize" [lvPageIndex]="pageIndex1" [lvTotal]="total"
          (lvPageChange)="slaListpageChange($event)" [lvPageSizeOptions]="sizeOptions" [lvShowPageSizeOptions]="false"
          [hidden]="!total">
        </lv-paginator>
      </div>
    </div>
    <div *ngIf="slaList.length === 0" class="sla-no-data aui-block">
      <lv-empty></lv-empty>
    </div>
  </ng-container>

  <ng-container *ngIf="selectedSlaView">
    <div class="aui-paginator-container">
      <ng-container *ngIf="isCyberEngine; else elseTableTemplate">
        <lv-datatable [lvData]='slaDatas' (lvSortChange)="sortChange($event)" #lvTable lvResize lvSort
          lvResizeMode="expand" [lvScroll]="{ x: '100%' }">
          <thead>
            <tr>
              <th width="40px"></th>
              <ng-container *ngFor="let col of cyberCols">
                <th [lvCellKey]='col.key' *ngIf="col.show" [attr.width]="col.width" [lvShowSort]="col.isSort"
                  [lvShowFilter]="col.filter" [(lvFilters)]="col.filterMap" lvFilterCheckAll
                  (lvFilterChange)="cyberFilterChange($event)" lvShowCustom>
                  <span lv-overflow>{{col.label}}</span>
                  <div lvCustom *ngIf="col.key === 'name'">
                    <aui-custom-table-search (search)="searchByName($event)"
                      [filterTitle]="col.label"></aui-custom-table-search>
                  </div>
                </th>
              </ng-container>
              <th width="20px" style="padding: 0;">
                <i lv-icon="lv-icon-col-setting" #colPopover="lvPopover" lv-popover lvPopoverPosition="bottomRight"
                  [lvPopoverContent]="colHideTpl" lvPopoverTheme="light" lvPopoverTrigger="click"
                  style="cursor: pointer;">
                </i>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor='let item of lvTable.renderData'>
              <td width="40px" (click)='selectionRow(item.uuid)'>
                <label lv-radio [ngModel]='lvTable.isSelected(item) || resourceData.sla_id == item.uuid'></label>
              </td>
              <ng-container *ngFor="let col of cyberCols">
                <ng-container *ngIf="col.show">
                  <td [attr.width]="col.width">
                    <ng-container [ngSwitch]="col.key">
                      <ng-container *ngSwitchCase="'name'">
                        <span class="aui-link" id='outerClosable' (click)="getDetail($event, item)" lv-overflow>
                          {{item.name}}
                        </span>
                      </ng-container>
                      <ng-container *ngSwitchCase="'policy1'">
                        <ng-container
                          *ngTemplateOutlet="policyTpl; context: { $implicit: item.policy1 }"></ng-container>
                      </ng-container>
                      <ng-container *ngSwitchCase="'policy2'">
                        <ng-container
                          *ngTemplateOutlet="policyTpl; context: { $implicit: item.policy2 }"></ng-container>
                      </ng-container>
                      <ng-container *ngSwitchCase="'policy3'">
                        <ng-container
                          *ngTemplateOutlet="policyTpl; context: { $implicit: item.policy3 }"></ng-container>
                      </ng-container>
                      <ng-container *ngSwitchCase="'policy4'">
                        <ng-container
                          *ngTemplateOutlet="policyTpl; context: { $implicit: item.policy4 }"></ng-container>
                      </ng-container>
                      <ng-container *ngSwitchCase="'retentionDuration'">
                        <span lv-overflow>
                          {{'explore_days_label' | i18n:[item.retentionDuration]}}
                        </span>
                      </ng-container>
                      <ng-container *ngSwitchCase="'isIoEnhancedEnabled'">
                        <span lv-overflow>
                          {{item.isIoEnhancedEnabled | textMap:'switchStatus'}}
                        </span>
                      </ng-container>
                      <ng-container *ngSwitchCase="'isHoneypotDetectEnable'">
                        <span lv-overflow>
                          {{item.isHoneypotDetectEnable | textMap:'switchStatus'}}
                        </span>
                      </ng-container>
                      <ng-container *ngSwitchCase="'period'">
                        <ng-container *ngIf="item.isHoneypotDetectEnable; else elseEmptyTemplate">
                          <ng-container *ngIf="item.period > 0; else elseNoPeriodTemplate">
                            <span lv-overflow>{{'explore_decoy_update_label' | i18n:[item.period]}}</span>
                          </ng-container>
                          <ng-template #elseNoPeriodTemplate>
                            {{'explore_honeypot_not_update_label' | i18n}}
                          </ng-template>
                        </ng-container>
                      </ng-container>
                      <ng-container *ngSwitchDefault>
                        <span lv-overflow>
                          {{ item[col.key] | nil }}
                        </span>
                      </ng-container>
                    </ng-container>
                  </td>
                </ng-container>
              </ng-container>
              <td width="20px"></td>
            </tr>
          </tbody>
        </lv-datatable>
      </ng-container>
      <ng-template #elseTableTemplate>
        <lv-datatable [lvData]='slaDatas' #lvTable lvResize lvResizeMode="expand" [lvScroll]="{ x: '100%' }">
          <thead>
            <tr>
              <th width="40px"></th>
              <th lvCellKey='name' lvShowCustom>
                {{'common_name_label'|i18n}}
                <div lvCustom>
                  <aui-custom-table-search (search)="searchByName($event)"
                    filterTitle="{{'common_name_label'|i18n}}"></aui-custom-table-search>
                </div>
              </th>
              <th lvCellKey='backup_mode' lvShowFilter [(lvFilters)]='actionsFilterMap'
                (lvFilterChange)='filterChange($event)' lvFilterCheckAll>
                {{'protection_backup_mode_label'|i18n}}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor='let item of lvTable.renderData'>
              <td width="40px" (click)='selectionRow(item.uuid)' [ngClass]="{'disable-click':disableSLA}">
                <label lv-radio [ngModel]='lvTable.isSelected(item) || resourceData.sla_id == item.uuid'
                  [lvDisabled]="disableSLA || item.disabled"></label>
              </td>
              <td>
                <span class="aui-link" id='outerClosable' (click)="getDetail($event, item)" lv-overflow>
                  <ng-container *ngIf="isCyberEngine; else elseSlaTemplate">
                    <span>{{item.name}}</span>
                  </ng-container>
                  <ng-template #elseSlaTemplate>
                    <lv-group lvGutter='8px'>
                      <sla-type [name]="item.name"></sla-type>
                      <span class="guide-recommend-label" *ngIf="showGuideNew(item)">
                        {{'protection_guide_new_resource_label' | i18n}}
                      </span> <lv-tag [(ngModel)]='wormTag' lvMaxWidth="300" *ngIf="!!item?.isWormSLAList"></lv-tag>
                    </lv-group>
                  </ng-template>
                </span>
              </td>
              <td>
                {{item.backup_mode}}
              </td>
            </tr>
          </tbody>
        </lv-datatable>
      </ng-template>
      <div class="aui-paginator-wrap sla-paginator-padding">
        <lv-paginator lvMode="simple" [lvPageSize]="pageSize" [lvPageIndex]="pageIndex2" [lvTotal]="total"
          (lvPageChange)="slaDatasPageChange($event)" [lvPageSizeOptions]="sizeOptions" [lvShowPageSizeOptions]="false"
          [hidden]="!total">
        </lv-paginator>
      </div>
    </div>
  </ng-container>
</div>

<ng-template #cardTipTemplate>
  <div class="card-tip-container">
    <ng-container *ngIf="isCyberEngine && isRealDetection; else elseCardTipTemplate">
      <lv-form>
        <lv-form-item>
          <lv-form-label>{{'explore_snapshot_lock_time_label' | i18n}}</lv-form-label>
          <lv-form-control>
            <span>{{'explore_days_label' | i18n:[slaCardData.retentionDuration]}}</span>
          </lv-form-control>
        </lv-form-item>
        <lv-form-item>
          <lv-form-label>{{'explore_alarm_analysis_label' | i18n}}</lv-form-label>
          <lv-form-control>
            <span>{{slaCardData.isIoEnhancedEnabled | textMap:'switchStatus'}}</span>
          </lv-form-control>
        </lv-form-item>
        <lv-form-item>
          <lv-form-label>{{'explore_decoy_detection_status_label' | i18n}}</lv-form-label>
          <lv-form-control>
            <span>{{slaCardData.isHoneypotDetectEnable | textMap:'switchStatus'}}</span>
          </lv-form-control>
        </lv-form-item>
        <lv-form-item>
          <lv-form-label>{{'explore_decoy_update_frequency_label' | i18n}}</lv-form-label>
          <lv-form-control>
            <ng-container *ngIf="slaCardData.isHoneypotDetectEnable; else elseEmptyTemplate">
              <ng-container *ngIf="slaCardData.period > 0; else elseNoPeriodTemplate">
                <span lv-overflow>{{'explore_decoy_update_label' | i18n:[slaCardData.period]}}</span>
              </ng-container>
              <ng-template #elseNoPeriodTemplate>
                {{'explore_honeypot_not_update_label' | i18n}}
              </ng-template>
            </ng-container>
          </lv-form-control>
        </lv-form-item>
      </lv-form>
    </ng-container>
    <ng-template #elseCardTipTemplate>
      <div class="content">
        <div class="content-all">
          <div>{{'protection_backup_mode_label' | i18n}}</div>
          <div>{{slaCardData.backup_mode}}</div>
          <div>{{'common_associated_resource_label' | i18n}}</div>
          <div>{{slaCardData.resource_count | nil}}</div>
          <lv-tag *ngIf="slaCardData.isWormSLAList" [(ngModel)]='wormTag' lvMaxWidth="300"></lv-tag>
        </div>
      </div>
    </ng-template>
  </div>
</ng-template>

<ng-template #policyTpl let-item>
  <ng-container *ngIf="item; else elseEmptyTemplate">
    <div lv-overflow>
      {{'explore_detecte_mode_label' | i18n:[]:true}}{{item.ext_parameters?.need_detect | textMap:
      'detectionMethod'}}
    </div>
    <div lv-overflow>
      {{'explore_ransomware_detection_snapshot_label' | i18n:[]:true}}{{getDetectionPolicy(item)}}
    </div>
  </ng-container>
</ng-template>

<ng-template #elseEmptyTemplate>
  --
</ng-template>


<ng-template #colHideTpl>
  <lv-tree [lvData]="cyberCols" [lvShowCheckbox]="true" lvSelectionMode="multiple" [(lvSelection)]="columnSelection"
    (lvCheck)="columnCheck($event)"></lv-tree>
</ng-template>